<template>
  <div class="a">
    <el-container class="contain">
      <el-header class="el-header">
        <div class="logo">
          <img src="../assets/images/logo.png" alt="" style="width: 60px" />
          <div class="logo-title">牛小音</div>
        </div>
        <div class="head">
          <el-row style="margin-left: 14%">
            <el-col :span="20">
              <el-input
                placeholder=""
                v-model="searchName"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search"
                ></el-button> </el-input
            ></el-col>
            <el-col :span="2">
              <el-button type="primary" round @click="add">上传视频</el-button>
            </el-col>
            <el-col :span="2">
              <el-dropdown
                v-if="isLogin"
                class="avatar-container right-menu-item hover-effect"
              >
                <div class="avatar-wrapper">
                  <el-row>
                    <img src="../assets/images/logo6.png" class="user-avatar" />
                  </el-row>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <router-link to="/userCenter">
                    <el-dropdown-item> 个人中心 </el-dropdown-item>
                  </router-link>
                  <span style="display: block" @click="logout">
                    <el-dropdown-item divided> 退出登录 </el-dropdown-item>
                  </span>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button type="danger" round @click="toLogin" v-else
                >登 录</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="activeId"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleType"
            background-color="transparent"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="0">
              <i class="el-icon-menu"></i>
              <template #title>推荐</template>
            </el-menu-item>
            <div v-for="item in types">
              <el-menu-item :index="item.id">
                <i class="el-icon-menu"></i>
                <template #title>{{ item.name }}</template>
              </el-menu-item>
            </div>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <videoTypeList
            v-if="isList"
            :typeVideoList="typeVideoList"
          ></videoTypeList>
          <!-- <mouse v-else></mouse> -->

          <xgPlayer v-else></xgPlayer>
        </el-main>
      </el-container>
      <el-dialog
        :close-on-click-modal="false"
        :before-close="leadCloses"
        :visible.sync="leadFlag"
        append-to-body
        title="上传视频"
        width="800px"
        v-loading="loading"
        element-loading-text="视频上传中！"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="download">
          <el-row :gutter="80">
            <el-col :span="12">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :auto-upload="false"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="loadExcelFile"
                :before-remove="beforeRemove"
                drag
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload></el-col
            >
            <el-col :span="12">
              <div>
                <div class="radio-title">请选择视频类型</div>
                <el-radio-group
                  v-model="radio1"
                  @change="radioChange"
                  class="radio-group"
                >
                  <div v-for="item in types" class="radio-item">
                    <el-radio v-model="radio1" :label="item.id" border>{{
                      item.name
                    }}</el-radio>
                  </div>
                </el-radio-group>
              </div>
              <div class="inputTitle">
                <el-form
                  :model="Form"
                  :rules="rules"
                  ref="Form"
                  label-width="100px"
                  style="width: 80%"
                >
                  <el-form-item label="视频名称" prop="Title"
                    ><el-input v-model="Form.Title"></el-input
                  ></el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="footer">
          <el-button
            type="primary"
            plain
            @click="toUpload('Form')"
            icon="el-icon-upload2"
            >文件上传</el-button
          >
          <el-button @click="leadCloses" class="up">关闭</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
// import Header from "@/components/header";
import mouse from "./mouse.vue";
import xgPlayer from "./xgPlayer.vue";
import api from "@api/index";
import { getId } from "@/utils/auth";
import axios from "axios";
import {
  getToken,
  removeToken,
  removeUsername,
  removeId,
  removeEmail,
  removeType,
  removeisCommend,
} from "@/utils/auth";
import videoTypeList from "@/components/videoTypeList.vue";
export default {
  components: {
    mouse,
    xgPlayer,
    videoTypeList,
  },
  data() {
    return {
      loading: false,
      Form: {
        Title: "",
      },
      rules: {
        Title: [{ required: true, message: "请输入视频名称", trigger: "blur" }],
      },
      isList: false,
      isLogin: false,
      types: [],
      searchName: "",
      leadFlag: false,
      fileList: [],
      fileName: "",
      radio1: "",
      activeId: "0",
      selectedType: 0,
      typeVideoList: [],
    };
  },
  mounted() {
    if (getId()) {
      this.isLogin = true;
    }
    this.getTypes();
  },
  methods: {
    toLogin() {
      this.$router.push({ path: "/Login" });
    },
    logout() {
      console.log("logout");
      removeToken();
      removeUsername();
      removeId();
      removeEmail();
      removeType();
      removeisCommend();
      this.$router.push({ path: "/Login" });
    },
    search() {
      console.log("search");
      var searchData = {
        title: this.searchName,
      };
      api.search(searchData).then(
        (res) => {
          if (res.data) {
            this.isList = true;
            this.typeVideoList = res.data;
          } else {
            this.$notify({
              title: "无相关视频！",
              type: "info",
              duration: 6000,
            });
            // this.typeVideoList = [];
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    add() {
      if (!this.isLogin) {
        this.$confirm("您还未登录！", "提示", {
          confirmButtonText: "去登录",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push({ path: "/Login" });
          })
          .catch(() => {
            //点击取消弹窗
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.leadFlag = true;
      }
    },
    getTypes() {
      api.getType().then(
        (res) => {
          console.log(res);
          this.types = res.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    leadCloses() {
      this.$confirm("是否关闭页面?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.radio1 = "";
          this.loading = false;
          this.leadFlag = false;
          this.fileList = [];
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    radioChange() {
      console.log(this.radio1);
    },
    handlePreview(file) {
      console.log("handlePreview");
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log("handleRemove");
      console.log(file, fileList);
    },
    beforeRemove(file, fileList) {
      console.log("beforeRemove");
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    loadExcelFile(file, fileList) {
      this.fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (this.fileName != "mp4") {
        this.beforUploadJobError("文件类型不是mp4文件!");
        this.$refs["upload"].clearFiles();
        return false;
      }
      this.fileList = fileList;
      console.log(this.fileList[0].raw);
      return true;
    },
    beforUploadJobError(msg) {
      this.$notify.error({
        title: "错误",
        message: msg,
        duration: 15000,
      });
    },
    toUpload(Form) {
      console.log(this.Form.Title);
      console.log(this.fileList[0].raw);
      if (this.fileList.length == 0) {
        this.$notify({
          title: "请选择上传文件！",
          type: "warning",
          //存在时间
          duration: 6000,
        });
      } else if (!this.radio1) {
        this.$notify({
          title: "请选择视频类型！",
          type: "warning",
          //存在时间
          duration: 6000,
        });
      } else {
        this.$refs[Form].validate((valid) => {
          if (valid) {
            this.loading = true;
            var that = this;
            const formData = new FormData();
            formData.append("file", this.fileList[0].raw);
            formData.append("id", getId());
            formData.append("type", this.radio1);
            formData.append("title", this.Form.Title);
            console.log(formData);
            axios({
              method: "post",
              url: "http://192.168.43.19:8080/upload",
              headers: {
                Authorization: getToken(),
                "Content-Type": "application/x-www-form-urlencoded",
              },
              data: formData,
            })
              .then((res) => {
                this.loading = false;
                console.log(res);
                console.log(typeof res.status);
                if (res.status == 200) {
                  that.$notify({
                    title: "上传成功！",
                    type: "success",
                    duration: 4000,
                  });
                  this.leadFlag = false;
                  this.fileList = [];
                  this.$refs[Form].resetFields();
                } else {
                  that.$notify({
                    title: "上传失败！",
                    type: "error",
                    duration: 4000,
                  });
                }
              })
              .catch(function (error) {
                this.loading = false;
                that.$notify({
                  title: "上传失败！",
                  type: "error",
                  duration: 4000,
                });
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    handleType(key, keyPath) {
      this.activeId = key;
      console.log(key);
      if (key != "0") {
        api.getTypeVideo(key).then(
          (res) => {
            this.isList = true;
            this.typeVideoList = res.data;
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        this.isList = false;
      }
    },
  },
};
</script>

<style scoped>
.a {
  width: 100%;
  min-height: 100vh;
  background-image: url(../assets/images/bg3.jpg);
  background-size: cover;
  background-position: center center;
  /* background-color: rgb(11, 11, 11); */
}

.el-aside {
  /* background-color: #ffffff33; */
  color: var(--el-text-color-primary);
  text-align: left;
  height: 80%;
}
.el-menu {
  border: 0 !important;
}
.el-menu-item:hover {
  background-color: transparent !important;
  /* color: rgb(255, 208, 75) !important; */
}
.el-menu-item,
.el-submenu__title {
  height: 50px;
  line-height: 50px;
}
.el-header {
  display: flex;
}
.head {
  flex: 10;
  /* margin: 20px 0; */
  padding-top: 20px;
}
.logo {
  /* width: 400px; */
  margin-top: 20px;
  display: flex;
  flex: 2;
  flex-direction: row;
  align-items: center;
}
.logo-title {
  margin-left: 20px;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 15px #46abf4, 0 0 10px #fcfcfe;
}
/deep/.head .el-input--small .el-input__inner {
  height: 38px;
  line-height: 38px;
}
/deep/.head input.el-input__inner {
  background: rgba(255, 255, 255, 0.3);
  border: 0;
  /* height: 46px; */
  border-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  color: #fff;
}
/deep/.head .el-input .el-input-group__append {
  border-left: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff;
  border: 0;
}
/deep/.head .el-input .el-input-group__append:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.user-avatar {
  cursor: pointer;
  margin-top: -10px;
  width: 60px;
  height: 60px;
  border-radius: 10px;
}
.input-with-select {
  margin: 0 25%;
  width: 50%;
}
.radio-group {
  display: flex;
  flex-wrap: wrap;
}
.radio-item {
  width: 30%;
  margin-right: 10px;
  margin-bottom: 5px;
}
.radio-title {
  margin-bottom: 10px;
}
.footer {
  text-align: center;
  margin-top: 20px;
}
.main {
  margin-top: 20px;
  /* background-color: #fff; */
}
/deep/.el-carousel__indicator--vertical {
  display: none !important;
}
</style>